//vue2方式
import {createRouter,createWebHistory} from "vue-router"

//1.创建路由数组对象，配置路由url和组件的映射关系
let routes = [
    //启动后默认前往界面
    {
        path:"",
        redirect:"/home"
    },
    {
        path:"/home",
        name:"home",
        //元数据：描述数据的数据，路由映射对象本身就是数据，在数据中增加其他数据时就定义为元数据meta
        meta:{
            title:"首页",
            keepAlive:true
        },
        //注册组件
        component:()=>import("@/components/HomeVIew.vue"),
        //注册子组件  子组件的path不要加/
        children:[
            {
                path:"news",
                name:"news",
                component:()=>import("@/components/HomeNews.vue")
            },
            {
                path:"weather",
                name:"weather",
                component:()=>import("@/components/HomeWeather.vue")
            }
        ]
    },
    {
        path:"/about",
        name:"about",
        //元数据
        meta:{
            title:"关于"
        },
        component:()=>import("@/components/AboutView.vue")
    },
    {
        path:"/user/:userName", //userName是参数名
        name:"user",
        //元数据
        meta:{
            title: "用户"
        },
        component:()=>import("@/components/UserView.vue")
    },
    {
        path:"/profile",
        name:"profile",
        //元数据
        meta:{
            title: "我的"
        },
        component:()=>import("@/components/ProfileView.vue")
    }
]

//2.创建路由实例对象
const router = createRouter({
    //路由使用H5中的history模式
    history:createWebHistory(process.env.BASE_URL),
    //路由对象 ES6增加语法表示 当k与v一样时可这样写
    routes,
});

//全局后置钩子
router.afterEach((to)=>{
    //从目标组件路由对象中获取其元数据中是title作为网页标题
    document.title = to.matched[0].meta.title;
});
//3.讲router路由对象导出(用于传递到Vue实例中)
export default router;


